<template>
  <div class="container">
    <input type="number" v-model="x" />&nbsp;
    <select name="" id="fu" v-model="fu">
      &nbsp;
      <option value="+"> + </option>
      <option value="-"> - </option>
      <option value="*"> * </option>
      <option value="/"> / </option>
      <option value="%"> % </option>
    </select>&nbsp;
    <input type="number" v-model="y" />&nbsp; &nbsp;
    <button id="btn" @click="fun()">=</button>&nbsp;
    <span>{{ z }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fu: "+",
      x: 0,
      y: 0,
      z: 0,
    };
  },
  methods: {
    fun() {
      var flag = this.fu;
      switch (flag) {
        case "+":
          this.z = parseFloat(this.x) + parseFloat(this.y);
          console.log(this.z);
          break;
        case "-":
          this.z = this.x * 1 - this.y * 1;
          console.log(this.z);
          break;
        case "*":
          this.z = parseFloat(this.x) * parseFloat(this.y);
          console.log(this.z);
          break;
        case "/":
          this.z = parseFloat(this.x) / parseFloat(this.y);
          console.log(this.z);
          break;
        
        default :
         this.z = parseFloat(this.x) % parseFloat(this.y);
          console.log(this.z);
      }
    },
  },
  components: {},
};
</script>

<style scoped></style>
